<template>
    <el-popover placement="right" width="200px">
        <template v-slot:reference>
            <div :class='getType()'>
                <div class="courseTitle">
                    {{ props.course.name }}
                </div>
                <div class="courseTeacher" v-if="showTeacher">
                    教师:{{ props.course.teacher }}
                </div>
                <div class="courseLocation">
                    {{ props.course.location }}
                </div>
            </div>
        </template>
        <template #default>
            <div class="detailTitle">
                {{ props.course.name }}
            </div>
            <div class="detail">
                学分: {{ props.course.credit }}
            </div>
            <div class="detail">
                第{{ 2 * (props.course.order as number) - 1 }}、{{ 2 * (props.course.order as number) }}小节
            </div>
            <div style="align-items: center;display: flex;" v-if="showTeacher">
                <v-icon icon="mdi-account">

                </v-icon>
                <span class="detail" style="vertical-align: middle;margin-left: 5%;">
                    {{ props.course.teacher }}
                </span>
            </div>
            <div style="align-items: center;display: flex;">
                <v-icon icon="mdi-map-marker">

                </v-icon>
                <span class="detail" style="vertical-align: middle;margin-left: 5%;">
                    {{ props.course.location }}
                </span>
            </div>
        </template>
    </el-popover>
</template>
<script lang="ts" setup>
import { type Course } from '@/models/course';
import { getCourseType } from '@/utils/courseUtil'
const props = defineProps<{
    course: Course,
    showTeacher?: boolean
}>()
function getType() {
    return getCourseType(props.course.type)
}
</script>
<style>
.compulsory {
    border-radius: 5px;
    background-color: rgba(180, 206, 250, 0.8);
    width: 90%;
    height: 94%;
    padding-left: 2%;
    text-align: start;
}

.limited {
    border-radius: 5px;
    background-color: rgba(228, 76, 49, 0.5);
    width: 90%;
    height: 94%;
    padding-left: 2%;
    text-align: start;
}

.unlimited {
    border-radius: 5px;
    background-color: rgba(21, 178, 68, 0.5);
    width: 90%;
    height: 94%;
    padding-left: 2%;
    text-align: start;
}

.courseTitle {
    font-size: 10px;
    max-width: 70px;
    margin-top: 3%;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.courseTeacher {
    margin-top: 10%;
    font-size: 9.5px;
    color: rgba(0, 0, 0, 0.7);
}

.courseLocation {
    margin-top: 10%;
    font-size: 9.5px;
}

.detailTitle {
    font-weight: 900;
    font-size: 16px;
    color: black;
}

.detail {
    font-size: 13px;
    font-weight: bold;
    color: gray;
}
</style>